<template>
    <div class="recommend" ref="recommend">
        <scroll
            class="recommend-content"
            :data="discList"
            ref="scroll"
        >
            <div>
                <m-header title="音乐馆"></m-header>
                <!-- 轮播图区 -->
                <div class="slider-wrapper">
                    <div class="slider-content" v-if="images.length">
                        <slider>
                            <div v-for="item in images" :key="item.id" class="slider-item">
                                <a :href="item.linkUrl" class="a">
                                    <img :src="item.picUrl" class="img needsclick">
                                </a>
                            </div>
                        </slider>
                    </div>
                </div>
                <!-- 歌单列表区 -->
                <div class="recommend-list" v-show="discList.length">
                    <h1 class="list-title">热门歌单推荐</h1>
                    <ul>
                        <li v-for="(item, index) in discList"
                            class="item" :key="index"
                            @click="selectItem(item)"
                        >
                            <div class="icon">
                                <img class="img" width="60" height="60" v-lazy="item.imgurl" alt="">
                            </div>
                            <div class="text">
                                <!-- v-html 直接插入元素的innerHtml -->
                                <h2 class="name" v-html="item.creator.name"></h2>
                                <p class="desc" v-html="item.dissname"></p>
                            </div>
                            <div class="right-arrow">
                                <i class="back-icon iconfont icon-right"></i>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="loading-container" v-show="!discList.length">
                    <load></load>
                </div>
            </div>
        </scroll>
        <router-view></router-view>
    </div>
</template>

<script type="text/ecmascript-6">
    import MHeader from 'components/m-header/m-header'
    import Slider from 'base/slider/slider'
    import Scroll from 'base/scroll/scroll'
    import Load from 'base/load/load'
    import { getImages, getDiscList } from 'api/recommend'
    import PlayListMixin from 'common/mixins/play-list'
    import { getStyle } from 'common/js/dom'
    import { MINI_PLAYER_HEIGHT, TAB_HEIGHT } from 'common/js/config'
    import { ERR_OK } from 'api/config'
    import { mapMutations, mapGetters } from 'vuex'

    export default {
        name: 'recommend',
        mixins: [PlayListMixin],
        data() {
            return {
                images: [],
                discList: []
            }
        },
        created() {
            this._getImages()
            this._getDiscList()
        },
        computed: {
            ...mapGetters([
                'playHistory'
            ])
        },
        methods: {
            // jsonp获取轮播图片
            _getImages() {
                getImages().then((res) => {
                    if (res.code === ERR_OK) {
                        this.images = this._normalizeImages(res)
                    }
                })
            },
            _normalizeImages(data) {
                let reg = []
                let images = data.focus.data.content
                for (let img of images) {
                    reg.push({
                        linkUrl: `https://y.qq.com/n/yqq/album/${img.jump_info.url}.html`,
                        picUrl: img.pic_info.url
                    })
                }

                return reg
            },
            // 获取歌单列表
            _getDiscList() {
                getDiscList().then((res) => {
                    if (res.code === ERR_OK) {
                        this.discList = res.data.list
                    }
                })
            },
            selectItem(item) {
                this.$router.push({
                    path: `/recommend/${item.dissid}`
                })

                this.setDisc(item)
            },
            // 重设滚动部分底部距离
            handlePlayList(playList) {
                const bottom = playList.length > 0 ? `${MINI_PLAYER_HEIGHT + TAB_HEIGHT}px` : ''
                const el = this.$refs.recommend
                getStyle(el, 'bottom', bottom)
                this.$refs.scroll.refresh()
            },
            ...mapMutations({
                setDisc: 'SET_DISC'
            })
        },
        components: {
            Slider,
            Scroll,
            Load,
            MHeader
        }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import "~common/stylus/variable"

    .recommend
        position: fixed
        width: 100%
        top: 0
        bottom: $height-tab
        .recommend-content
            height: 100%
            overflow: hidden
            /* 利用padding-top 为子节点图片占位 */
            .slider-wrapper
                position: relative
                width: 100%
                height: 0
                padding-top: 39%
                overflow: hidden
                /* 轮播图 */
                .slider-content
                    position: absolute
                    top: 0
                    left: 0
                    width: 100%
                    height: 100%
            /* 歌单列表 */
            .recommend-list
                .list-title
                    height: 65px
                    line-height: 65px
                    text-align: center
                    font-size: $font-size-medium
                    color: $color-theme
                .item
                    display: flex
                    box-sizing: border-box
                    align-items: center
                    padding: 0 20px 20px 20px
                    .icon
                        position: relative
                        flex: 0 0 60px
                        width: 60px
                        margin-right: 20px
                        &:after
                            content: ''
                            position: absolute
                            display: block
                            top: 10%
                            bottom: 17%
                            right: -5px
                            width: 15px
                            background: #efefef
                            border-radius: 5px
                            z-index: -1
                        .img
                            border-radius: 8px
                    .text
                        flex: 1
                        display: flex
                        flex-direction: column
                        justify-content: center
                        line-height: 20px
                        overflow: hidden
                        font-size: $font-size-medium
                        .name
                            margin-bottom: 10px
                            color: $color-text
                        .desc
                            color: $color-text-l
                    .right-arrow
                        flex: 0 0 10px
                        font-weight: bolder
                        font-size: $font-size-small
                        color: $color-text-d
            .loading-container
                position: absolute
                width: 100%
                top: 145%
                transform: translateY(-50%)
</style>
